<template>
	<!-- 总容器 -->
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<div class="go-back"><i class="fa fa-reply" @click="goback"></i></div>
			<p class="left">钱包明细</p>
		</header>

		<div class="button-group">
			<button v-for="option in options" :key="option.value" @click="selectedOption = option.value; filter()" :class="{ active: selectedOption === option.value }">
				{{ option.label }}
			</button>
		</div>

		<ul class="WalletInfo">
			<li v-for="item in WalletTransactionArr">
				<!-- <img :src=""> -->
				<div class="Transaction">
					<div class="Transaction-infoa">
						<h3 style="font-size: 5vw;color: #333">{{item.status}}</h3>
						<p style="font-size: 5vw" v-if="item.status!='充值'">-{{item.amount}}</p>
						<p style="font-size: 5vw;color: #EDC532" v-if="item.status=='充值'">+{{item.amount}}</p>
					</div>
					<div class="Transaction-infob">
						<p>{{item.createTime}}</p>
						<p style="font-size: 4vw">余额 &#165;{{item.remain}}</p>
					</div>
				</div>
			</li>
		</ul>

	</div>
</template>

<script>
	export default {
		name: 'MyWalletInfo',
		data() {
			return {
				WalletTransactionArr: [],
				walletId: this.$route.query.walletId,
				options: [
				        { value: '全部', label: '全部' },
				        { value: '充值', label: '充值' },
				        { value: '提现', label: '提现' },
				        { value: '支付', label: '支付' }
				      ],
				selectedOption: '全部'
			}
		},
		created() {
			this.user = this.$getSessionStorage('user');
			let url = `VirtualWalletTransactionContorller/listTransactionBywalletId/${this.walletId}`;
			this.$axios.get(url)
				.then((response) => {
					this.WalletTransactionArr = response.data.result;
				})
				.catch((error) => {
					console.error(error);
				});
		},
		methods: {
			filter(){
				let url = `VirtualWalletTransactionContorller/listTransactionBystatus/${this.walletId}/${this.selectedOption}`;
				this.$axios.get(url)
					.then((response) => {
						this.WalletTransactionArr = response.data.result;
					})
					.catch((error) => {
						console.error(error);
					});
				//console.log('按钮被点击，当前选中:', this.selectedOption);
			},
			goback() {
				this.$router.go(-1);
			}
		}
	}
</script>

<style scoped="scoped">
	element {
		-ms-overflow-style: none;
		/* IE和Edge */
	}

	.wrapper .button-group {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 16vw;
	}

	.wrapper .button-group button {
		padding: 8px 18px;
		margin-right: 10px;
		border: 1px solid #ccc;
		background: white;
		cursor: pointer;
	}

	.wrapper .button-group button.active {
		background: #007bff;
		color: white;
		border-color: #007bff;
	}

	/* 总容器 */
	.wrapper {
		width: 100%;
		height: 100%;
		//background-color: #f5f5f5;
	}

	/* 头部 */
	.wrapper header {
		width: 100%;
		height: 12vw;
		background-color: #0097FF;
		color: #fff;
		font-size: 4.8vw;

		position: fixed;
		left: 0;
		top: 0;

		display: flex;
		/*justify-content: center;*/
		align-items: center;
	}

	.wrapper header .go-back {
		padding: 0 32vw 0 2vw;
	}

	.wrapper .WalletInfo {
		margin-top: 4vw;
	}

	.wrapper .WalletInfo li .Transaction {
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 3vw;

		border: 1px solid #e0e0e0;
		/* 边框：1px 实线，浅灰色 */
		background-color: #f5f5f5;
		/* 背景色：浅灰色 */
		border-radius: 5px;
		/* 可选：圆角效果 */
		padding: 3vw;
		/* 调整内边距，使内容不紧贴边框 */
	}

	.wrapper .WalletInfo li .Transaction .Transaction-infoa {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
	}

	.wrapper .WalletInfo li .Transaction .Transaction-infob {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 2vw;
	}
</style>
